﻿@{
    ViewBag.Title = "StreetAndFamilyTree";
}

<h2>Hệ thống báo cáo</h2>
<script type="text/javascript">

    function init(data) {
        $("#map").empty();
        var arrTreeId = new Array();
        var arrTreeLonLat = new Array();


        map = new OpenLayers.Map("map");
        var mapnik = new OpenLayers.Layer.OSM();
        var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
        var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
        var position = new OpenLayers.LonLat(108.202622, 16.051794).transform(fromProjection, toProjection);
        var zoom = 13;

        map.addLayer(mapnik);

        if (data) {
            var markers = new OpenLayers.Layer.Markers("Markers");
            map.addLayer(markers);
            var x = 0.00001, y = 0.00001;

            var count = 0;
            $.each(data, function (i, item) {
                var position1 = new OpenLayers.LonLat(item.PointY, item.PointX).transform(fromProjection, toProjection);
                var marker = new OpenLayers.Marker(position1)

                //dang ky su kien click cho icon marker
                marker.events.register("click", marker, function (evt) {

                    var lonlat = evt.object.lonlat;
                    for (var i = 0; i < count; i++) {

                        if (lonlat.lon == arrTreeLonLat[i].lon && lonlat.lat == arrTreeLonLat[i].lat) {

                            $("#Tree_Id").val(arrTreeId[i]);
                            GetReportTree(arrTreeId[i]);
                        }
                    }
                })
                markers.addMarker(marker);
                arrTreeId[count] = item.Id;
                arrTreeLonLat[count] = marker.lonlat;
                count = count + 1;

            });

        }
        map.setCenter(position, zoom);
        // thay doi icon market.png
        $(".olAlphaImg").click(function () {
            //xoa het cac marker da danh dau truoc do
            $(".olAlphaImg[src*='red.png']").attr('src', '/Scripts/img/marker.png');
            //danh dau marker vua moi click
            $(this).attr('src', '/Scripts/img/marker-red.png');
        });
    }


    $(document).ready(function () {
        init();

        $("#btnSearch").click(function () {
            var streetId = $("#Street_Id").val();
            var familyTreeId = $("#familyTrees").val();
            var groupTreeId = $("#groupTrees").val();
            var wardId = $("#Ward_Id").val();
            var districtId = $("#District_Id").val();

            $.getJSON("Search", { districtId: districtId, wardId: wardId, streetId: streetId, familyTreeId: familyTreeId, groupTreeId: groupTreeId })
              .done(function (data) {
                  //load lai ban do
                  init(data);
              })
              .fail(function (jqxhr, textStatus, error) {
                  var err = textStatus + ", " + error;
                  console.log("Request Failed: " + err);
              });
        });
    });
</script>

<div class="pure-g pure-form pure-form-stacked">
    <div class="pure-u-5-24">
        @Html.Label("Quận:")
        @Html.DropDownList("District_Id", "Tất cả")
    </div>
    
    <div class="pure-u-5-24">
        @Html.Label("Phường: ")
        <div id="select-ward" >@Html.Partial("~/Views/Tree/_SelectWard.cshtml")</div>        
    </div>
    <div class="pure-u-10-24" style="margin-left:20px;">
        @Html.Label("Đường:")
        @Html.DropDownList("Street_Id", "Tất cả")
    </div>
</div>
<div class="pure-g pure-form pure-form-stacked" style="margin-top:20px;">
    <div class="pure-u-5-24">
        @Html.Label("Dòng họ cây:")
        @Html.DropDownList("familyTrees", "Tất cả")
    </div>
    <div class="pure-u-5-24">
        @Html.Label("Nhóm cây: ")        
        @Html.DropDownList("groupTrees", "Tất cả")
    </div>
    <div class="pure-u-5-24" style="margin-top:25px;">
        <input type="button" id="btnSearch" class="button pure-button" value="Tìm kếm" />
    </div>
</div>
<div class="post">
    <a name="TemplateInfo"></a>
    <div id="map" style="width: 100%; height: 500px; padding: 10px">
    </div>
</div>
<div id="tree-report"></div>
<script type="text/javascript">
    $(function () {
        $("#District_Id").change(function () {
            $.ajax({
                url: '@Url.Action("_GetSelectWard","Tree",null)',
                data: { District_Id: $("#District_Id").val() },
                type: 'POST',
                success: function (data) {
                    $("#select-ward").html(data);
                }
            });
        })
    });

    function GetReportTree(treeId) {
        $.post("GetReportTree", { id: treeId }, function (data) {
            $("#tree-report").html(data);
        })
    }
</script>
